<template>
  <div id="HeaderC">
    <Button type="text" to="/bingo" replace class="menuItem">主站</Button>
    <Button type="text" to="/bingo/Video" replace class="menuItem">视频专区</Button>
    <Button type="text" to="/bingo/Article" replace class="menuItem">贴文专区</Button>
<!--    <div style="width:200px;">-->
      <Input placeholder="请输入搜索内容" style="width:20%;border: #2b85e4" class="active"
             v-model="search_data" @keyup.enter.native="search()">
        <Icon type="ios-search" slot="suffix" color="blue" @click="search()"/>
      </Input>
<!--    </div>-->
<!--    <img src="../assets/logo.png" width="30px" height="30px"/>-->
    <Button type="text" to="/bingo/User_home" replace class="menuItem">个人中心</Button>
    <Button type="text" to="/bingo/Collect" replace class="menuItem">收藏</Button>
    <Button type="text" to="/bingo/Hst" replace class="menuItem">历史记录</Button>
    <Button type="text" to="/bingo/Msg" replace class="menuItem">消息</Button>
    <div style="position: absolute;right: 2%">
    <Button  @click="logout"
            replace style="color: white; align-items:end;"
            v-if="token!=null" type="text"
             class="menuItem"
            shape="circle">注销</Button>
    </div>
    </div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      search_data:'',
      token:sessionStorage.getItem("token")
    }
  },
  methods:{
    search(){
      console.log(this.search_data)
    },
    logout(){
      this.$http.get('/api/logout').then(res=>{
        this.$Message.success("注销成功")
        sessionStorage.removeItem("token")//删除本地缓存的token
        this.$router.push("/login")
      })

    }
  }

}
</script>

<style scoped>

#HeaderC{
  display:flex;
  flex-direction:row;
  width:100%;
  height:120px;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/images/HeaderC_background.jpeg");
  background-size: cover;
}
  .menuItem{
    color: white;
  }
  .menuItem:hover{
    background-color: #2b85e4;
  }
</style>
